<template>
  <van-row justify="space-between" gutter="20">
    <van-col span="8" v-for="item in list" :key="item.series_id">
      <div @click="toCarDetail(item.series_id)" class="hotImage">
        <van-image width="7rem" height="6rem" fit="scale-down" :src="item.cover_image" />
        <p class="series_name">{{ item.series_name }}</p>
      </div>
    </van-col>
  </van-row>
</template>

<script >
import { onMounted, reactive, toRefs } from "vue";
import { get } from "@/tool/get.js";
import { useRouter } from "vue-router";
import { Toast } from "vant";
export default {
  name: "hotCar",
  setup() {
    const router = useRouter();
    const toCarDetail = (id) => {
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });
      router.push({ path: `/carDetail/${id}` });
    };
    const state = reactive({
      list: [],
      HotCar: [],
    });
    onMounted(async () => {
      let _data = JSON.parse(localStorage.getItem(import.meta.env.VITE_APP_INDEXBARCARS));
      if (new Date().getTime() > import.meta.env.VITE_APP_UPTIME && localStorage.getItem(import.meta.env.VITE_APP_UPDATECOUNT) != 1) {
        _data = null
        localStorage.removeItem(import.meta.env.VITE_APP_INDEXBARCARS)
        localStorage.setItem(import.meta.env.VITE_APP_UPDATECOUNT, 1)
      }
      if (_data) {
        state.list = _data[0].info.series;
        state.HotCar = _data[0].info.brand;
      } else {
        await get("/data/carData").then((res) => {
          // console.log(res.data.data,'res');
          localStorage.setItem(import.meta.env.VITE_APP_INDEXBARCARS, JSON.stringify(res.data.data));
          state.list = res.data.data[0].info.series;
          state.HotCar = res.data.data[0].info.brand;
        });
      }
    });
    return {
      ...toRefs(state),
      toCarDetail,
    };
  },
};
</script>

<style lang="less" scoped>
.hotImage {
  text-align: center;
}

.series_name {
  font-size: 14px;
  margin: 0;
  text-align: center;
}
</style>